<template>
<div class="return" @click="lastStep">
        <img src="../assets/images/teacher/public/arrow-left-bold.svg" alt="返回">
    </div>
    <div class="container">
        <div class="step">
            <el-steps :active="active" finish-status="wait" align-center="true">
                <el-step title="基本信息" style=" font-family: Source Han;  color: #707070;" />
                <el-step title="内容设置" />
            </el-steps>
        </div>
        <div class="title">目录设置:</div>
        <div class="mainBox">
            <div class="left">
                <div class="addTitle">
                    <p><img src="../assets/images/teacher/addCourse/addBig.svg" alt=""> 添加标题</p>
                </div>
                <div class="addTitle" >
                    <p style="justify-content:center"><img src="../assets/images/teacher/addCourse/addBig.svg" alt=""> 添加二级标题</p>
                </div>
            </div>
            <div class="right">
                <div class="addTitle" style="margin-top: 5.5%;">
                    <p><img src="../assets/images/teacher/addCourse/addBig.svg" alt=""> 添加内容</p>
                </div>
            </div>
            <div class="main">
                <TreeList v-model="checkedIds" :isEdit="true" :treeData="treeData"/>
            </div>
        </div>
        <div class="but">
            <el-button @click="lastStep">上一步</el-button>
            <div class="but2"><el-button @click="submit">提交审核</el-button>
                </div>
        </div>
    </div>
</template>
<script setup>
import {ref, defineEmits} from 'vue'
import TreeList from './TreeList.vue';
import Tree from '../treeData.json'

const emits = defineEmits(['changePage',' submit', 'getAddCourseInfo'])

const active = ref(1)

const treeData = ref(Tree.data)
console.log(treeData);

//返回
const lastStep = function(){
    emits('changePage', 1);
}

//提交
const submit  = function(){
    let courseInfo = {
        catalogue: treeData.value
    } 
    emits('getAddCourseInfo', courseInfo, 2)
    emits('submit')
}

</script>
<style scoped>
.return {
    width: 30px;
    height: 30px;
    position: absolute;
    cursor: pointer;
    left: 1%;
    top: 1%;
}

.container {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
    padding: 4.2%;
    padding-top: 3%;
    display: flex;
    flex-direction: column;
}

.step {
    width: 97%;
}
.title{
	font-family: Source Han Sans CN;
	font-size: 22px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 37px;
	letter-spacing: 0px;
	color: #707070;
    font-weight: 550;
}
.mainBox{
    width: 100%;
    height: 481px;
	background-color: #fafafa;
	border: solid 1px #707070;
    display: flex;
    margin-top: 1.5%;
    padding: 2.5%;
    padding-top: 1%;
    padding-bottom: 1.6%;
    flex-wrap: wrap;
    align-items: flex-start;
}
.left{
    width: 44%;
    height: 25%;
}
.right{
    width: 56%;
    height: 25%;
}
.but {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.but2 button,
.but button {
    width: 120px;
	height: 40px;
	background-color: #939393;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
	border-radius: 6px;
    font-family: Source Han Sans CN;
	font-size: 1em;
	font-weight: normal;
	font-stretch: normal;
	line-height: 31px;
	letter-spacing: 0px;
    color: #fafafa;
    margin-top: 26px;
}
.but2{
    margin-left:5%
}
.but2 button{
    background-color: #8493a6;
}
.but2 button:hover{
    background-color: #707070;
}
.but button:hover {
    background-color: #707070;
}
.addTitle p{
    width: 100%;
    font-family: Source Han Sans CN;
	font-size: 20px;
	font-weight: bolder;
	font-stretch: normal;
    display: flex;
    align-items: center;
	letter-spacing: 0px;
	color: #6f6f6f;
    margin-top: 1%;
}
.main{
    width: 100%;
    height: 75%;
}
</style>